<template>
  <div id="tmpl">
       <!-- 1.0商品轮播图(数据问题，图片出不来) -->
        <div class="slider">
            <slider :imgs="imgs"></slider>
        </div>

        <!-- 2.0实现商品购买区 -->
        <div id="buy">
            <h4 v-text="info.title"></h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价 : <s>￥{{info.market_price}}</s>   销售价 : <span>￥{{info.sell_price}}</span>
                </li>
                <li class="inputli">  
                    购买数量 : <inputNumber class="inputNumber" v-on:dataobj="getcount"></inputNumber>  
                    <transition name="show" @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter">
                    <div class="ball" v-show="isshow">

                    </div>
                    </transition>
                </li>
                <li>    
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
                </li>
            </ul>
        </div>
        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号 : {{info.goods_no}}</li>
                <li>库存情况 : {{info.stock_quantity}}</li>
                <li>上架时间 : {{info.add_time |  datefmt('YYYY-MM-DD')}}</li>
            </ul>
        </div>
        <!-- 3.0图文详情 -->
        <!-- 4.0商品评论 -->
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
            <mt-button type="primary" size="large" class="imgdesc">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
             <mt-button type="danger" size="large">商品评论</mt-button>
             </router-link>
        </div>
  </div>
</template>

<script>
import slider from '../subcom/slider.vue';
import common from '../../kits/common.js';
import inputNumber from '../subcom/inputNumber.vue';
import {Toast} from 'mint-ui';
//使用VM对象
import {vm,COUNTSTR} from '../../kits/vm.js';
import {setItem,valueObj} from '../../kits/localSg.js';

export default {
  components:{
        slider,
        inputNumber
    },
  data(){
      return {
          id:0,      //商品id
          imgs:[],
          info:{

          },
          isshow:false,
          inputNumberCount:1 //当前购买商品的数量
      }
  },
  created(){
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
  },
  methods:{
      //1.0 获取轮播图片
      getimgs(){
          var url = common.apidomain + '/api/getthumimages/'+this.id;
          this.$http.get(url).then(function(res){
              if(res.body.status!=0){
                  Toast(res.body.message);
                  return
              }
              this.imgs = res.body.message;
                
          })
      },
      //2.0获取商品详细数据
      getinfo(){
          var url = common.apidomain + '/api/goods/getinfo/'+this.id;
          this.$http.get(url).then(function(res){
              if(res.body.status!=0){
                  Toast(res.body.message);
                  return;
              }
              this.info = res.body.message[0];
          })

      },
      //3.0获取购买商品的数量
      getcount(count){
          this.inputNumberCount = count;
      },
      //4.0加入购物车方法
      toshopcar(){
          //触发事件
          vm.$emit(COUNTSTR,this.inputNumberCount);
          //将数据保存到localStorage中
            valueObj.goodsid = this.id;
            valueObj.count = this.inputNumberCount;
            setItem(valueObj);

            //实现小球动画
            this.isshow =!this.isshow;
      },
      //5.0定义动画3个方法
      beforeEnter(el){
          //设定小球的初始位置
          el.style.transform ="translate(0px,0px)";
      },
      enter(el,done){
          //小球出现动画
          el.offsetWidth;

          //设置小球结束位置
          el.style.transform = "translate(74px,400px)"

          //结束动画
          done();
      },
      afterEnter(el){
          //重置小球的初始状态
          this.isshow = !this.isshow;
      }
  }
}
</script>

<style scoped>
.slider{
    border:1px solid rgba(0,0,0,.4);
    border-radius: 5px;
    margin: 5px;
}
#buy,#params,#other{
    margin:5px;
    padding:5px;
    border:1px solid rgba(0,0,0,.4);
    border-radius: 5px;
}
#buy h4{
    color:#0094ff;
    padding: 5px;
}
#buy ul,#params ul{
    padding-left: 0px;
}
#buy li,#params li{
    list-style: none;
    padding: 8px;
}
#buy .price span{
    color:red;
}
.line{
    height: 1px;
    border:1px solid rgba(0,0,0,.2);
}
#other .imgdesc{
    margin-bottom: 20px;
}
.inputli{
    position: relative;
}
.inputNumber{
    position: absolute;
    left:100px;
    top:5px;
}
.ball{
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left:154px;
    top:8px;
    transition: all 0.4s ease;
    z-index: 999;
}
</style>


